<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="中高风险区" :showAddBtn="false">
      <div class="columnFlex">
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <div>
              <p class="time">
                由国家卫生健康委每日汇总各地报送疫情风险等级数据 截止{{
                  new Date().getFullYear() +
                  "-" +
                  (new Date().getMonth() + 1 >= 10
                    ? new Date().getMonth() + 1
                    : "0" + (new Date().getMonth() + 1)) +
                  "-" +
                  (new Date().getDate() > 10
                    ? new Date().getDate()
                    : "0" + new Date().getDate()) +
                  " " +
                  new Date().getHours() +
                  "时"
                }}
              </p>
            </div>
            <van-swipe-cell v-for="val in listData" :key="val.areaProvince">
              <div class="cellContent" @click="handleDetail(val)">
                <div class="top">
                  <div class="flexTit">
                    <div class="title">
                      {{ val.areaProvince }}
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="content">
                    {{ val.areaCity.join("、") }}
                  </div>
                </div>
              </div>
            </van-swipe-cell>
            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="false"
      label="中高风险区"
      :isShowEdit="currentParam.appStatus == '1'"
      :showSubmit="currentParam.appStatus == '1' && editType == 'detail'"
      :editType="editType"
      @handleClose="fullscreenModal = false"
      @handleCancel="editType = 'detail'"
    >
      <detail v-show="editType == 'detail'" ref="detailRef"></detail>
    </fullscreenModal>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import {
  getPageForHighArea,
  queryHighAreaDetail,
} from "@/api/srvAssurance/epidprevention/highArea/highArea";
import detail from "./detail.vue";
export default {
  components: { detail },
  data() {
    return {
      formData: {
        areaProvince: "",
        areaTime: "",
      },
      time: "", //当前时间 英文格式
      loading: false,
      finished: false,
      refreshLoading: false,
      fullscreenModal: false,
      totalPage: 0, //总页数
      isAdd: false,
      editType: "",
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  created() {
    if (sessionStorage.getItem("prjData")) {
      var prjData = JSON.parse(sessionStorage.getItem("prjData"));
      this.projectId = prjData.projectId || "";
    }
  },
  mounted() {
    this.time = new Date();
    this.formData.areaTime =
      this.time.getFullYear() +
      "-" +
      (this.time.getMonth() + 1 >= 10
        ? this.time.getMonth() + 1
        : "0" + (this.time.getMonth() + 1)) +
      "-" +
      (new Date().getDate() > 10
        ? new Date().getDate()
        : "0" + new Date().getDate());
    this.getSearch();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      getPageForHighArea(this.formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 1000 && res.data) {
            this.listData = res.data;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.listData = [];
      this.getSearch();
    },

    // 重置
    handleReset() {
      this.formData = {
        keyword: "",
      };
      this.onRefresh();
    },

    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      this.editType = "detail";
      this.isAdd = false;
      let item = param;
      this.currentParam = param;
      this.loading = true;
      this.formData.areaProvince = param.areaProvince;
      let res = await queryHighAreaDetail(this.formData);
      if (res.code == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      this.$refs.detailRef.getData(item);
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
    }
    .bottom {
      padding: 3px 10px 0;
    }
    .title {
      font-size: 17px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .content {
      height: 40px;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .source {
      font-size: 5px;
      color: rgb(149, 149, 149);
    }
  }
  .time {
    font: bold 20px "微软雅黑";
    padding: 0 10px;
    text-align: center;
    font-size: 15px;
    background-color: #fff;
  }
}
</style>
